const loveMe = document.querySelector('.loveMe')
const times = document.querySelector('#times')

let clickTime = 0
let timesClicked = 0

loveMe.addEventListener('click', (e) => {
    if(clickTime === 0) { /*第一次点击loveme元素 */
        clickTime = new Date().getTime()  /*将clicktime设置为当前时间ms */
    } else {
        if((new Date().getTime() - clickTime) < 800) { /*小于800ms则表示两次之间点击时间间隔很短 */
            createHeart(e) /*创建一个heart元素，调用函数 */
            clickTime = 0  /*重置点击时间 */
        } else {
            clickTime = new Date().getTime() /*两次点击之间间隔很长，则设置为当前时间，和 下一次点击比较 */
        }
    }
})

/*定义一个名为 createHeart 的函数*/ 
const createHeart = (e) => {
    const heart = document.createElement('i') /*创建一个<i>元素，表示图案或图标*/
    heart.classList.add('fas')
    heart.classList.add('fa-heart') /*将fas和fa-heart类添加到i元素上，显示心形图标 */

    const x = e.clientX /*获取鼠标点击的位置 */
    const y = e.clientY

    /*获取事件目标元素相对于其父元素的左偏移量和上偏移量。*/
    const leftOffset = e.target.offsetLeft 
    const topOffset = e.target.offsetTop

    /*计算鼠标指针相对于事件目标元素内部的位置*/
    const xInside = x - leftOffset   /*鼠标在x轴上的位置 */
    const yInside = y - topOffset    /*鼠标在y轴上的位置 */

    /*将元素的top和left样式属性设置为yInside和xInside`，这将使图标出现在鼠标指针的位置。 */
    /*top是自带属性，将元素相对于其定位父元素的上边缘移动，这里的父元素是loveme容器*/
    heart.style.top = `${yInside}px`
    heart.style.left = `${xInside}px`

    loveMe.appendChild(heart)/*将新创建的<i>元素添加到loveMe元素中，这是一个带有背景图像的容器。 */

    times.innerHTML = ++timesClicked/*将 timesClicked 变量的值加 1，然后将其显示在页面上。 */

    /*remove() ：该方法将从文档中删除 heart 元素。*/
    setTimeout(() => heart.remove(), 1000)
}
